<template>
  <div class="project-content">
    <Navbar ref="navbarComp" isshow="false" @on-search="onSearch" @click.stop/>
    <van-tabs style="width:90%;z-index:2;" v-model:active="activeTab" @click-tab="tabClick" ref="tabs-container" @click.stop>
      <van-tab v-for="(tabItem, index) in tabList" :title="tabItem.title" :key="index"></van-tab>
    </van-tabs>
    <!-- <div class="condition" @click="handleCondition()">点击</div> -->
    <!-- <condition v-show="showTop" :activeTab="type" @close-pop="closePop"></condition> -->
    <keyProject ref="childComp" :activeTab="activeTab" :inputValue="inputValue" :isInit="isInit"></keyProject>
  </div>
</template>

<script lang="ts" setup>
import { config } from '@/config'
import {
  computed,
  ref,
  reactive,
  toRefs,
  watch,
  onActivated,
  getCurrentInstance,
  onMounted
} from 'vue'
import Navbar from './components/navbar.vue'
import keyProject from './components/keyProject.vue'
import condition from './components/condition.vue'
import ProjectServe from '@/api/keyProject'
import { useRouter } from 'vue-router'
// import { RouteParams, onBeforeRouteUpdate } from 'vue-router';

defineOptions({
  name: 'project'
})

const inputValue = ref('') //检索框输入关键字
// const activeTab = ref('关注项目')
const type = ref<number>(0)
const showTop = ref(false)
const tabList = ref([
  {
    title: '关注项目',
    name: '关注项目',
    page: 0,
    url: '/api/Feedback/dmkShow'
  },
  {
    title: '开工前',
    name: '关注项目',
    page: 0,
    url: '/api/Feedback/dmkShow'
  },
  {
    title: '施工阶段',
    name: '关注项目',
    page: 0,
    url: '/api/Feedback/dmkShow'
  },
  {
    title: '竣工投产',
    name: '关注项目',
    page: 0,
    url: '/api/Feedback/dmkShow'
  }
])
const route = useRouter()
//定义子组件实例，
const childComp = ref(),navbarComp = ref();
const params = ref({
  cityCondition: '',
  productId: '',
  projectCondition: '',
  projectName: '',
  propertyCondition: '',
  provinceCondition: '',
  userId: ''
})
const activeTab = ref<number>()
const isInit = ref(true)
onMounted(() => {
  // 路由参数
})
watch(
  () => route.currentRoute.value,
  (newPath, oldPath) => {
    if(newPath.name == 'project'){
      if(JSON.stringify(newPath.query) == '{}'){
      // alert('从专区过来数据初始化')
       type.value = 0;
       activeTab.value = 0;
       isInit.value = true;       
       childComp.value.showTop = false;      
       childComp.value.isMap = false; 
       // 清空输入框
       navbarComp.value.clearInput();
       inputValue.value = '';
       childComp.value.clearParams();
       childComp.value.getKeyProjects({});
    } else {
     childComp.value.searchData({});
     isInit.value = false;
     
    }
    }
       
  },
  { immediate: true }
)

const handleCondition = () => {
  showTop.value = true
}
const closePop = () => {
  showTop.value = true
}
const tabClick = e => {
  type.value = e.target.innerText
}
//输入框触发检索事件
const onSearch = value => {  
  inputValue.value = value

}
// 返回一个特定的 DOM 节点，作为挂载的父节点
const getContainer = () => {
  return document.querySelector('.my-container')
}
</script>
<script lang="ts">
</script>

<style lang="less" scoped>
@import url('./index');
.condition {
  position: absolute;
  right: 16px;
  top: 120px;
}
.project-content {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}
</style>
